<template>
  <div>
    <label v-if="id == null">新建数据层</label>
    <label v-else>编辑数据层</label>
    <el-form label-position="left" label-width="100px" ref="infoForm" :model="info" :rules="rules">
      <input type="number" v-model.number="info.id" hidden />
      <el-row>
        <el-col :span="20">
          <el-form-item label="名称:" prop="name">
            <el-input placeholder="请输入名称" v-model="info.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="编码:" prop="code">
            <el-input placeholder="请输入编码" v-model="info.code"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="描述信息:" prop="description">
            <el-input
              placeholder="请输入描述信息"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4}"
              v-model="info.description"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: {},
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        code: [
          { required: true, message: "请输入编码", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        description: [
          { required: false },
          {
            min: 1,
            max: 200,
            message: "长度在 1 到 200 个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  props: {
    id: {
      type: Number,
      required: false
    }
  },
  mounted() {
    this.loadLayerInfo(this.id);
  },
  watch: {
    id(val) {
      this.info.id = val;
      this.loadLayerInfo(val);
    }
  },
  methods: {
    loadLayerInfo(id) {
      if (id == null) {
        this.info = {
          id: null,
          name: "",
          code: "",
          description: ""
        };
        return;
      }
      let _this = this;
      this.axios
        .post(this.HOST + "/layer/get", {
          id: this.id
        })
        .then(function(res) {
          _this.info = res.data.data;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    createLayer() {
      let _this = this;
      this.axios
        .post(this.HOST + "/layer/create", {
          code: this.info.code,
          name: this.info.name,
          description: this.info.description
        })
        .then(function(res) {
          if (!res.data.status) {
            _this.$alert(res.data.msg, "提示", {
              confirmButtonText: "确定"
            });
          } else {
            _this.$emit("confirm");
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    editLayer() {
      let _this = this;
      this.axios
        .post(this.HOST + "/layer/update", {
          id: this.info.id,
          code: this.info.code,
          name: this.info.name,
          description: this.info.description
        })
        .then(function(res) {
          if (!res.data.status) {
            _this.$alert(res.data.msg, "提示", {
              confirmButtonText: "确定"
            });
          } else {
            _this.$emit("confirm");
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    submitForm() {
      this.$refs.infoForm.validate(valid => {
        if (!valid) {
          return false;
        }
        if (this.id == null) {
          this.createLayer();
        } else {
          this.editLayer();
        }
      });
    },
    resetForm() {
      this.$refs.infoForm.resetFields();
    }
  }
};
</script>
<style scoped>
</style>
